<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：8、事件处理器  按键修饰符</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 在表单内聚焦按下回车触发submmit方法 -->
		<input v-on:keyup.enter="submmit"><br/><br/>

		<!-- 
			判断按下的健值用处很大，vue还提供更强大的组合键，就像我们平时使用ctrl+c和ctrl+v来进行复制粘贴一样 
			支持的组合键有四种：
			.ctrl
			.alt
			.shift
			.meta
			使用demo如下：
		-->

		<!-- 按下组合键 alt + c 触发clear方法-->
		<input @keyup.alt.67="combineKey1"><br/><br/>

		<!-- ctrl + click -->
		<button @click.ctrl="doSomething">test</button>
	</div>

	<script type="text/javascript">
		// 自定义按键修饰符别名
		// 空格键的keycode为32
		Vue.config.keyCodes.f1 = 112

		var vm = new Vue({
			el: '#app',
			methods: {
				submmit: function(){
					alert('you press key Enter')
				},
				pressSpacebar: function(){
					alert('you press key Spacebar')
				},
				combineKey1: function(){
					alert('you press combine keys alt + c')
				},
				doSomething: function(){
					alert('you press ctrl and click mouse')
				}
			}
		})

	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->